<template>
    <div class="map">
        <div class="chinamap" ref="MapBoxref" :autoresize="true"></div>
        <div @click="goBack"><el-button style="cursor: pointer;">后退</el-button></div>
    </div>
</template>

<script setup lang="ts">
import { MapData_Guang } from '@/request';
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const MapBoxref = ref(null)
const mapArr = ref([//是一个响应式的数组，初始值是包含一个对象的数组
    {
        adcode: 450000,// 区域编码，代表中国的编码
        name: '广西壮族自治区' // 区域名称，这里是中国
    }
])
const renderMapBox = (adcode: number, mapname: string) => {
    MapData_Guang(adcode).then(res => {// 调用 MapBox_data 函数以获取指定 adcode 的地图数据，返回一个 Promise
        // 当 Promise 被解析时，执行回调函数
        console.log('地图', res)
        const chinaJson = res.data// 从响应中提取地图数据（假设数据在 res.data 中）
        const mapData = chinaJson.features.map((item: { properties: any }) => { // 遍历 chinaJson.features 数组，每个元素是一个地图区域
            const data = (Math.random() * 80 + 20).toFixed(0)//20-80随机数 // 生成一个介于 20 和 100 之间的随机数，表示模拟数据
            // toFixed(0) 将随机数格式化为整数
            const tempValue = item.properties.center ? [...item.properties.center, data] : item.properties.center// 如果 item.properties.center 存在，将其经纬度数组和随机数据组合成一个新数组
            // 如果不存在，则 tempValue 直接等于 item.properties.center
            return {
                name: item.properties.name,
                value: tempValue,// 包含中心点经纬度及模拟数据 
                adcode: item.properties.adcode,//区域编码 
                level: item.properties.level,//层级
                data,
                itemStyle: {
                    normal: {
                        areaColor: '#053179', // 地图区域的颜色
                        borderColor: '#fff', // 地图区域的边界颜色
                        borderWidth: 0.5 // 地图区域的边界线宽
                    },

                } //模拟数据
            }
        })
        const myChart = echarts.init(MapBoxref.value)   // 使用 ECharts 初始化一个图表实例，MapBoxref.value 是用于绘制图表的 DOM 元素
        echarts.registerMap(mapname, chinaJson);// 注册地图数据，mapname 是地图名称，chinaJson 是地图的 JSON 数据
        const option = {
            geo: {
                map: mapname,
                roam: true,
                select: false,
                zoom: 1.2,
                // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                selectedMode: 'single',
                label: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        areaColor: '#033178',
                        borderColor: '#fff'
                    },
                },
                emphasis: {
                    itemStyle: {
                        areaColor: '#034098',
                        borderColor: '#fff',
                        borderWidth: 0
                    }
                }
            },


            series: [
                {
                    name: mapname,
                    type: 'map',
                    map: mapname,
                    roam: true,
                    geoIndex: 0,
                    data: mapData,
                    label: { show: false }
                },
                {
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: mapData,
                    encode: {
                        value: 2
                    },
                    symbolSize: '15',
                    label: {
                        show: true,
                        formatter: '{b}',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                            borderWidth: 0
                        },
                        position: 'right',
                        offset: [-20, 13]
                    },
                    itemStyle: {
                        color: 'yellow'
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
                {
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: mapData.map((item: any, index: number) => {
                        if (item.data > 90) return item
                    }),
                    encode: {
                        value: 2
                    },
                    symbolSize: '15',
                    label: {
                        show: true,
                        formatter: '{b}',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                            borderWidth: 0
                        },
                        position: 'right',
                        offset: [-20, 13]
                    },
                    itemStyle: {
                        color: 'red'
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                }
            ]
        }
        myChart.setOption(option, true)
        // 监听 'click' 事件，params 包含了点击事件的详细信息
        myChart.on('click', function (params) {
            if (params.seriesType !== 'map') return//该函数绑定在 myChart 上，处理 click 事件。// 如果点击的系列类型不是 'map'，则返回，不做任何处理
            const { adcode, level, name } = params.data// 从点击事件的 data 对象中解构出 adcode（行政编码），level（层级），name（名称）
            console.log(adcode, name)// 打印 adcode 和 name 到控制台，用于调试和查看点击的地理信息
            if (level === 'district') { // 如果当前层级是 'district'（即区级），打印 '最后一层了' 到控制台
                console.log('最后一层了')
                return // 返回，结束函数执行，因为没有更多的层级可以展开
            }
            if (!mapArr.value.some((item) => item.adcode === adcode)) { // 检查 mapArr.value 中是否已有 adcode 的项
                // 如果没有相同 adcode 的项
                mapArr.value.push({// 将新的行政区域（包含名称和 adcode）添加到 mapArr.value 数组中
                    name: name,
                    adcode: adcode
                })
            }
            renderMapBox(adcode, name) // 调用 renderMapBox 函数，传入 adcode 和 name，渲染对应的地图区域
        })
        window.addEventListener('resize', () => {
            myChart.resize()//地图适配
        })
    })
}
const goBack = () => {
    if (mapArr.value.length > 1) {// 检查 mapArr.value 数组的长度是否大于 1 // 如果数组长度大于 1，说明还有上一级可以返回
        mapArr.value.pop() // 移除 mapArr.value 数组中的最后一个元素
        // 这通常是当前查看的地图区域，移除它以返回上一级
        const lastState = mapArr.value[mapArr.value.length - 1]// 获取移除后的 mapArr.value 数组中的最后一个元素
        // 这个元素代表上一级的地图区域
        if (lastState) {   // 如果 lastState 存在
            renderMapBox(lastState.adcode, lastState.name)  // 调用 renderMapBox 函数，传入 lastState 的 adcode 和 name    // 更新地图以显示上一级的区域
        } else {
            renderMapBox(450000, '广西壮族自治区') // 如果 lastState 不存在，即数组为空 ,调用 renderMapBox 函数，传入默认的 adcode 和名称    这里的 adcode 为 100000，通常是中国的总代码，name 为 '中国'
        }
    } else {
        console.log('没有更多的了')
    }
}
onMounted(() => {
    // renderMapBox(mapArr.value[0].adcode,mapArr.value[0].name)
    renderMapBox(450000, '广西壮族自治区')
})
</script>

<style scoped>
.chinamap {
    width: 100%;
    height: 880px;

}
</style>
